<template>
    <div class="landBox" :style="(states[current].info as any)">
        <div class="land">{{ message }}</div>
    </div>
</template>
<script lang="ts" setup>
// import getGlobalData from "@/tool/getGlobalData"
import { landWork, landCtrl } from "./landScheduler"
import bus from "@/libs/bus.ts"
import { ref } from "vue"

interface state {
    info: Object;
    canTo: Array<String>,
    active?: Function
}
interface states {
    [propName: string]: state
}
let states: states = {
    small: {
        info: {
            width: "34%",
            left: "32%"
        },
        canTo: ['middle', 'large'],
        active: () => { message.value=''}
    },
    middle: {
        info: {
            width: "80%",
            left: "10%"
        },
        canTo: ['small'],
        active: (msg: string) => {
            message.value = msg
        }
    }
}

let current = ref("small")
let message = ref("")
//getGlobalData("eventBus")

function changeState(info:Array<string>): void {
    if((current.value!='small' && info[0]!='small') || current.value==info[0])return  
    let [to,...arg]=info
    if (!states[to]) {
        throw new Error("没有这个状态")
    }
    if (!states[current.value].canTo.includes(to)) {
        throw new Error(`当前状态${current.value}无法转到目标状态${to}`)
    }
    current.value = to
    states[to].active && states[to].active!(...arg)
    setTimeout(() => bus.emit('changeState', ['small']), 3e3)
}
bus.on('changeState', changeState as any);



let ctrl = new landCtrl()

ctrl.unshiftWork(new landWork("2",1,()=>{console.log(8882)},10000,0))
ctrl.unshiftWork(new landWork("1",0,()=>{console.log(8881)},10000,0))
ctrl.unshiftWork(new landWork("3",1,()=>{console.log(8883)},10000,10))
ctrl.unshiftWork(new landWork("3",1,()=>{console.log(8883)},10000,10))
console.log(ctrl)
</script>
<style scoped>
.landBox {
    position: fixed;
    left: 34%;
    transition: all 0.4s;
}

.land {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    width: 100%;
    height: 22px;
    line-height: 16px;
    margin-top: 3px;
    text-align: center;
    border-radius: 35px;
}
</style>